<template >
      <!-- 通行统计 -->
      <div class="data">
        <div class="sum_stop">
          <div class="mark_stop">
            <p>P</p>
          </div>
          <p class="text_name">总车位</p>
          <b class="text_number">372</b>
        </div>
        <ul class="stop_list">
          <li class="on_stop">
            <div class="mark_stop">
              <p class="used">P</p>
            </div>
            <div class="text_box">
              <p class="text_name">已用车位</p>
              <b class="text_number">227</b>
            </div>
          </li>
          <li class="on_stop">
            <div class="mark_stop">
              <p class="un_used">P</p>
            </div>
            <div class="text_box">
              <p class="text_name">空闲车位</p>
              <b class="text_number">145</b>
            </div>
          </li>
        </ul>
      </div>
</template>

<script>
export default {

  data() {
      return {

    } 
  },
  created(){

  },
  methods:{
  },
  activated() {
  },
}
</script>

<style scoped lang="less">
@import '../../../../assets/css/chuShiHua.less';
@img:'/static/img/park/home/';
  .main{
    width: calc((100% - 2vw) * 0.24);
    height: calc(((92% - 2vh)  * 0.95 * 0.32) - 4vh );
    background: #050505;
    margin: 50px;
    padding: 1vh 1vw;
  }

.data{
    .WH();
   .sum_stop{
    .WH(100%,50%);
    display: flex;
    align-items: center;
    .text_number{
      margin-left: 15%;
    }
   }
   .stop_list{
    .WH(100%,50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .on_stop{
      .WH(50%,100%);
      display: flex;
      align-items: center;
      .mark_stop{
        margin-left: 10%;
      }
    }
   }
}
  .mark_stop{
      width: 4vmin;
      height: 4vmin;
      box-shadow: 0px 0px 4px 0px #87CDFF;
      border-radius: 4px 4px 4px 4px;
      margin-left: 5%;
      opacity: 1;
      border: 1px solid #87CDFF;
      display: flex;
      justify-content: center;
      color:  #87CDFF;
      font-weight: 600;
      font-size: 28px;
      text-shadow: 0px 0px 1px rgba(135,205,255,0.8);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  .text_name{
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 23px;
    letter-spacing: 1px;
    padding: 0 5%;
  }
  .text_number{
    font-size: 24px;
    font-weight: 600;
    color: #B0E0FF;
    line-height: 28px;
    letter-spacing: 1px;
  }

.text_box{
  .WH(50%,4vmin);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .text_name{
    font-size: 16px;
  }
  .text_number{
    font-size: 20px;
  }
}
.used{
  height: 85%;
  border-bottom: 2px solid #86cbfd;
}
.un_used{
  height: 85%;
  border-bottom: 2px dashed #86cbfd;
  border-spacing: 10%;
}
</style>